<template>
  <div class='wrap'>
    <div class='container w'>
     <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">所有订单</el-menu-item>
        <el-menu-item index="2">待付款</el-menu-item>
        <el-menu-item index="3">待发货</el-menu-item>
        <el-menu-item index="4">待收货</el-menu-item>
        <el-menu-item index="5">待评价</el-menu-item>
      </el-menu>
    <Screen />
     <div class="body">
        <div class="t__header">
          <ul>
            <li><el-checkbox v-model="checked">全选</el-checkbox></li>
            <li>宝贝</li>
            <li>单价</li>
            <li>数量</li>
            <li>商品操作</li>
            <li>实付款</li>
            <li>交易状态</li>
            <li>操作</li>
          </ul>
        </div>
        <div class="t__body" v-for="(item,index) in list" :key="index">
          <div class="h">
            <div>
              <span><b>2022-03-22</b></span>
              <span>订单号:1522666454598976973</span>
              <span>商家: 三只松鼠</span>
              <span>联系商家 </span>
              <!-- el-icon-chat-line-round -->
            </div>
            <div>
              <i class="el-icon-delete"></i>
            </div>
          </div >
          <div class="b">
            <div class=name>
           <div>
              <el-image
              style="width: 100px; height: 100px"
              :src="item.img"
              fit="fit">
            </el-image>
           </div>
           <div>
             <div>
                 <el-link href="https://element.eleme.io" target="_blank" :underline="false">{{item.name}}</el-link>
             </div>
             <div>
                <p v-for="(parameter,index2) in item.parameter" :key="index2">{{parameter.name}}：{{parameter.value}},</p>
             </div>
             <div>
                <!-- <p v-for="(parameter,index2) in item.parameter" :key="index2">{{parameter.name}}：{{parameter.value}},</p> -->
             </div>
           </div>
          </div>
          <div class="unit-price">
           ￥{{item.unitPrice.newPrice}}
          </div>
           <div class="number">
            1
          </div>
          <div class="goodsOperation">
             <el-link :underline="false">申请售后</el-link>
            <el-link :underline="false">投诉卖家</el-link>
          </div>
          <div class="reaPayment">
            ￥{{item.unitPrice.newPrice}}
          </div>
           <div class="status">
           <el-link :underline="false">交易成功</el-link>
            <el-link :underline="false">查看详情</el-link>
             <el-link :underline="false">查看物流</el-link>
          </div>
          <div class="operation">
              <el-link :underline="false" icon="el-icon-edit-outline" @click="showComment = !showComment">评价</el-link>
              <el-link :underline="false" >追加评价</el-link>
          </div>
          </div>
        </div>
      </div>
      <Comment v-if="showComment" @close="showComment=!showComment"/>
    </div>
   </div>
</template>

<script>
import Screen from '@/mall/views/Trade/components/Screen'
import Comment from '@/mall/views/components/Comment'
  export default {
    name: 'Trade',
    components: {Screen,Comment},
    data() {
      return {
          activeIndex: '1',
          showComment:false,
           number:0,
      checked:false,
          list:[
        {
          img:'https://img.alicdn.com/bao/uploaded/i1/1679379594/O1CN01oYXgax2Kk6WxiRX0c_!!1679379594.jpg_80x80.jpg',
          name:'boost爆米花全掌运动内增高鞋垫男女吸汗隐形防臭减震透气软舒适',
          parameter:[
            {name:'颜色',value:'白色'},
            {name:'尺码',value:'42码'},
            {name:'高度',value:'1.5cm'},
          ],
          unitPrice:{
            oldPrice:'89.00',
            newPrice:'29.99',
          },
          number:0,
          price:'99.90',
        },
        {
          img:'https://img.alicdn.com/bao/uploaded/i1/1679379594/O1CN01oYXgax2Kk6WxiRX0c_!!1679379594.jpg_80x80.jpg',
          name:'boost爆米花全掌运动内增高鞋垫男女吸汗隐形防臭减震透气软舒适',
          parameter:[
            {name:'颜色',value:'白色'},
            {name:'尺码',value:'42码'},
            {name:'高度',value:'1.5cm'},
          ],
          unitPrice:{
            oldPrice:'89.00',
            newPrice:'29.99',
          },
          number:0,
          price:'99.90',
        },
        {
          img:'https://img.alicdn.com/bao/uploaded/i1/1679379594/O1CN01oYXgax2Kk6WxiRX0c_!!1679379594.jpg_80x80.jpg',
          name:'boost爆米花全掌运动内增高鞋垫男女吸汗隐形防臭减震透气软舒适',
          parameter:[
            {name:'颜色',value:'白色'},
            {name:'尺码',value:'42码'},
            {name:'高度',value:'1.5cm'},
          ],
          unitPrice:{
            oldPrice:'89.00',
            newPrice:'29.99',
          },
          number:0,
          price:'99.90',
        },
      ],
      };
    },
    created() {},
    methods: {
     handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }, 
  };
</script>
<style lang="scss" scoped>
.w{
  width: 1200px;
  margin:0 auto;
}
.container{
  margin-top: 20px;
  background:#fff;
}
.body{
   padding: 15px 15px;
  .t__header{
    padding: 10px 15px 5px 15px;
    ul{
      margin:0;
      display:flex;
      justify-content:space-between;
      // text-align: center;
      li{
        width: 100px;
        text-align: center;
      }
      li:nth-child(1),li:nth-child(2){
        width: 190px;
         text-align: left;
      }
    }
  }
   .t__body:hover{
    border: 1px solid #8ba4f7;
    box-shadow: 0 3px 8px 0 rgba(122, 192, 241, 0.3);
    }
  .t__body{
    display:flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    // height: 170px;
    margin: 15px 0;
     border: 1px solid #f5f5f5;
    .h{
      height: 39px;
      line-height:39px;
      display:flex;
      padding: 0px 15px;
      justify-content: space-between;
      background:#f5f5f5;
      span{
        font-size:14px;
        margin-right:30px;
      }
      .el-icon-delete{
        cursor: pointer;
      }
    }
   .b{
     padding: 14px 15px;
    display: flex;
    justify-content:space-between;
 
    
    box-sizing: border-box;
    div{
      text-align: center;
       width: 100px;
    }
    .name{
      display: flex;
      justify-content: space-between;
       width: 400px;
      .el-image{
      border-radius: 8px;
    }
    div:nth-child(2),div:nth-child(3){
      display: flex;
      flex-wrap: wrap;
      width: 270px;
      div:nth-child(1){
        .el-link{
           width: 270px;
          line-height:1.5;
          text-align: left;
        }
      }
      p{
        margin:0px 5px;
      color: #9c9c9c;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size:13px;
      }
    }
    }
    .reaPayment,.unit-price{
      margin-bottom: 8px;
        font-weight: 600;
        color: rgb(72, 70, 69);
        font-size:14px;
        font-family: Verdana,Tahoma,arial;
    }
   }
 
  }
}
</style>